<script setup>
import axios from '@axios'
import {
  requiredValidator,
} from '@validators'
import { reactive, ref } from 'vue'
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'

const props = defineProps({
  isDrawerOpen2: {
    type: Boolean,
    required: true,
  },
  editData: {
    type: Object,
    required: false,
  },
})

const emit = defineEmits([
  'update:isDrawerOpen2',
  'cmpData2',
])

const editData = ref(props.editData)

const isFormValid = ref(false)
const refForm = ref()
const id = ref(editData.value.id)
const componentId = ref(editData.value.componentId)
const componentName = ref(editData.value.componentName)
const type = ref(editData.value.type)
const script = ref(editData.value.script)
const language = ref(editData.value.language)
const clazz = ref(editData.value.clazz)
const cmpPre = ref(editData.value.cmpPre)
const cmpFinallyOpt = ref(editData.value.cmpFinallyOpt)
const cmpId = ref(editData.value.cmpId)
const cmpTag = ref(editData.value.cmpTag)
const cmpMaxWaitSeconds = ref(editData.value.cmpMaxWaitSeconds)
const cmpTo = ref(editData.value.cmpTo)
const cmpDefaultOpt = ref(editData.value.cmpDefaultOpt)
const cmpTrueOpt = ref(editData.value.cmpTrueOpt)
const cmpFalseOpt = ref(editData.value.cmpFalseOpt)
const cmpParallel = ref(editData.value.cmpParallel)
const cmpDoOpt = ref(editData.value.cmpDoOpt)
const cmpBreakOpt = ref(editData.value.cmpBreakOpt)

const clazzShow = ref(true)
const scriptShow =  ref(true)
const languageShow =  ref(true)
const cmpPreShow = ref(true)
const cmpFinallyOptShow = ref(true)
const cmpIdShow = ref(true)
const cmpTagShow = ref(true)
const cmpMaxWaitSecondsShow = ref(true)
const cmpToShow = ref(true)
const cmpDefaultOptShow = ref(true)
const cmpTrueOptShow = ref(true)
const cmpFalseOptShow = ref(true)
const cmpParallelShow = ref(false)
const cmpDoOptShow = ref(false)
const cmpBreakOptShow = ref(false)

const changeType = val => {
  if (val == 'common'){
    clazzShow.value = true
    scriptShow.value = false
    languageShow.value = false
    cmpPreShow.value = true
    cmpFinallyOptShow.value = true
    cmpIdShow.value = true
    cmpTagShow.value = true
    cmpMaxWaitSecondsShow.value = true
    cmpToShow.value = false
    cmpDefaultOptShow.value = false
    cmpTrueOptShow.value = false
    cmpFalseOptShow.value = false
    cmpParallelShow.value = false
    cmpDoOptShow.value = false
    cmpBreakOptShow.value = false
  }

  if(val == 'switch'){
    clazzShow.value = true
    scriptShow.value = false
    languageShow.value = false
    cmpPreShow.value = true
    cmpFinallyOptShow.value = true
    cmpIdShow.value = true
    cmpTagShow.value = true
    cmpMaxWaitSecondsShow.value = true
    cmpToShow.value = true
    cmpDefaultOptShow.value = true
    cmpTrueOptShow.value = false
    cmpFalseOptShow.value = false
    cmpParallelShow.value = false
    cmpDoOptShow.value = false
    cmpBreakOptShow.value = false
  }

  if(val == 'if'){
    clazzShow.value = true
    scriptShow.value = false
    languageShow.value = false
    cmpPreShow.value = true
    cmpFinallyOptShow.value = true
    cmpIdShow.value = true
    cmpTagShow.value = true
    cmpMaxWaitSecondsShow.value = true
    cmpToShow.value = false
    cmpDefaultOptShow.value = false
    cmpTrueOptShow.value = true
    cmpFalseOptShow.value = true
    cmpParallelShow.value = false
    cmpDoOptShow.value = false
    cmpBreakOptShow.value = false
  }

  if(val == 'break'){
    clazzShow.value = true
    scriptShow.value = false
    languageShow.value = false
    cmpPreShow.value = true
    cmpFinallyOptShow.value = true
    cmpIdShow.value = true
    cmpTagShow.value = true
    cmpMaxWaitSecondsShow.value = true
    cmpToShow.value = false
    cmpDefaultOptShow.value = false
    cmpTrueOptShow.value = false
    cmpFalseOptShow.value = false
    cmpParallelShow.value = false
    cmpDoOptShow.value = false
    cmpBreakOptShow.value = false
  }

  if(val == 'for' || val == 'while'){
    clazzShow.value = true
    scriptShow.value = false
    languageShow.value = false
    cmpPreShow.value = true
    cmpFinallyOptShow.value = true
    cmpIdShow.value = true
    cmpTagShow.value = true
    cmpMaxWaitSecondsShow.value = true
    cmpToShow.value = false
    cmpDefaultOptShow.value = false
    cmpTrueOptShow.value = false
    cmpFalseOptShow.value = false
    cmpParallelShow.value = true
    cmpDoOptShow.value = true
    cmpBreakOptShow.value = true
  }

  if(val == 'iterator'){
    clazzShow.value = true
    scriptShow.value = false
    languageShow.value = false
    cmpPreShow.value = true
    cmpFinallyOptShow.value = true
    cmpIdShow.value = true
    cmpTagShow.value = true
    cmpMaxWaitSecondsShow.value = true
    cmpToShow.value = false
    cmpDefaultOptShow.value = false
    cmpTrueOptShow.value = false
    cmpFalseOptShow.value = false
    cmpParallelShow.value = true
    cmpDoOptShow.value = true
    cmpBreakOptShow.value = false
  }

  if(val == 'fallback'){
    clazzShow.value = false
    scriptShow.value = false
    languageShow.value = false
    cmpPreShow.value = false
    cmpFinallyOptShow.value = false
    cmpIdShow.value = false
    cmpTagShow.value = false
    cmpMaxWaitSecondsShow.value = false
    cmpToShow.value = false
    cmpDefaultOptShow.value = false
    cmpTrueOptShow.value = false
    cmpFalseOptShow.value = false
    cmpParallelShow.value = false
    cmpDoOptShow.value = false
    cmpBreakOptShow.value = false
  }

  if(val == 'script'){
    clazzShow.value = false
    scriptShow.value = true
    languageShow.value = true
    cmpPreShow.value = false
    cmpFinallyOptShow.value = false
    cmpIdShow.value = false
    cmpTagShow.value = false
    cmpMaxWaitSecondsShow.value = false
    cmpToShow.value = false
    cmpDefaultOptShow.value = false
    cmpTrueOptShow.value = false
    cmpFalseOptShow.value = false
    cmpParallelShow.value = false
    cmpDoOptShow.value = false
    cmpBreakOptShow.value = false
  }

  if(val == 'switch_script'){
    clazzShow.value = false
    scriptShow.value = true
    languageShow.value = true
    cmpPreShow.value = false
    cmpFinallyOptShow.value = false
    cmpIdShow.value = false
    cmpTagShow.value = false
    cmpMaxWaitSecondsShow.value = false
    cmpToShow.value = true
    cmpDefaultOptShow.value = true
    cmpTrueOptShow.value = false
    cmpFalseOptShow.value = false
    cmpParallelShow.value = false
    cmpDoOptShow.value = false
    cmpBreakOptShow.value = false
  }

  if(val == 'if_script'){
    clazzShow.value = false
    scriptShow.value = true
    languageShow.value = true
    cmpPreShow.value = false
    cmpFinallyOptShow.value = false
    cmpIdShow.value = false
    cmpTagShow.value = false
    cmpMaxWaitSecondsShow.value = false
    cmpToShow.value = false
    cmpDefaultOptShow.value = false
    cmpTrueOptShow.value = true
    cmpFalseOptShow.value = true
    cmpParallelShow.value = false
    cmpDoOptShow.value = false
    cmpBreakOptShow.value = false
  }

  if(val == 'for_script' || val == 'while_script'){
    clazzShow.value = false
    scriptShow.value = true
    languageShow.value = true
    cmpPreShow.value = false
    cmpFinallyOptShow.value = false
    cmpIdShow.value = false
    cmpTagShow.value = false
    cmpMaxWaitSecondsShow.value = false
    cmpToShow.value = false
    cmpDefaultOptShow.value = false
    cmpTrueOptShow.value = false
    cmpFalseOptShow.value = false
    cmpParallelShow.value = true
    cmpDoOptShow.value = true
    cmpBreakOptShow.value = true
  }

  if(val == 'break_script'){
    clazzShow.value = false
    scriptShow.value = true
    languageShow.value = true
    cmpPreShow.value = false
    cmpFinallyOptShow.value = false
    cmpIdShow.value = false
    cmpTagShow.value = false
    cmpMaxWaitSecondsShow.value = false
    cmpToShow.value = false
    cmpDefaultOptShow.value = false
    cmpTrueOptShow.value = false
    cmpFalseOptShow.value = false
    cmpParallelShow.value = false
    cmpDoOptShow.value = false
    cmpBreakOptShow.value = false
  }

  if(!val){
    clazzShow.value = false
    scriptShow.value = false
    languageShow.value = false
    cmpPreShow.value = false
    cmpFinallyOptShow.value = false
    cmpIdShow.value = false
    cmpTagShow.value = false
    cmpMaxWaitSecondsShow.value = false
    cmpToShow.value = false
    cmpDefaultOptShow.value = false
    cmpTrueOptShow.value = false
    cmpFalseOptShow.value = false
    cmpParallelShow.value = false
    cmpDoOptShow.value = false
    cmpBreakOptShow.value = false
  }
}

watch(type, val => {
  changeType(val)
})

// 👉 drawer close
const closeNavigationDrawer = () => {
  emit('update:isDrawerOpen2', false)
  nextTick(() => {
    refForm.value?.reset()
    refForm.value?.resetValidation()
  })
}

const onSubmit = () => {
  refForm.value?.validate().then(({ valid }) => {
    if (valid) {
      emit('cmpData2', {
        id: id.value,
        componentId: componentId.value,
        componentName: componentName.value,
        type: type.value,
        script: script.value,
        language: language.value,
        clazz: clazz.value,
        cmpPre: cmpPre.value,
        cmpFinallyOpt: cmpFinallyOpt.value,
        cmpId: cmpId.value,
        cmpTag: cmpTag.value,
        cmpMaxWaitSeconds: cmpMaxWaitSeconds.value,
        cmpTo: cmpTo.value,
        cmpDefaultOpt: cmpDefaultOpt.value,
        cmpTrueOpt: cmpTrueOpt.value,
        cmpFalseOpt: cmpFalseOpt.value,
        cmpParallel: cmpParallel.value,
        cmpDoOpt: cmpDoOpt.value,
        cmpBreakOpt: cmpBreakOpt.value,
      })
      emit('update:isDrawerOpen2', false)
      nextTick(() => {
        refForm.value?.reset()
        refForm.value?.resetValidation()
      })
    }
  })
}



const handleDrawerModelValueUpdate = val => {
  emit('update:isDrawerOpen2', val)
}

onMounted(() => {
  changeType(editData.value.type)
  nodeTypeSelect()
  scriptTypeSelect()
})

const nodeTypeList = reactive([])

const nodeTypeSelect = () => {
  axios.post('/liteflow/cmp/type/options', { }).then(r => {
    nodeTypeList.push(...r.data.data)
  }).catch(e => {
    console.error(e)
  })
}

const scriptTypeList = reactive([])

const scriptTypeSelect = () => {
  axios.post('/liteflow/cmp/script/options', { }).then(r => {
    scriptTypeList.push(...r.data.data)
  }).catch(e => {
    console.error(e)
  })
}
</script>

<template>
  <VNavigationDrawer
    temporary
    :width="500"
    location="end"
    class="scrollable-content"
    :model-value="props.isDrawerOpen2"
    @update:model-value="handleDrawerModelValueUpdate"
  >
    <!-- 👉 Title -->
    <AppDrawerHeaderSection
      title="更新组件"
      @cancel="closeNavigationDrawer"
    />

    <PerfectScrollbar :options="{ wheelPropagation: false }">
      <VCard flat>
        <VCardText>
          <!-- 👉 Form -->
          <VForm
            ref="refForm"
            v-model="isFormValid"
            @submit.prevent="onSubmit"
          >
            <VRow>
              <!-- 👉 Full name -->
              <VCol cols="12">
                <VTextField
                  v-model="componentId"
                  :rules="[requiredValidator]"
                  class="setting-mb-12"
                  label="组件ID"
                  clearable
                />
              </VCol>

              <!-- 👉 Email -->
              <VCol cols="12">
                <VTextField
                  v-model="componentName"
                  :rules="[requiredValidator]"
                  class="setting-mb-12"
                  label="组件名称"
                  clearable
                />
              </VCol>

              <VCol cols="12">
                <VSelect
                  v-model="type"
                  label="组件类型"
                  :rules="[requiredValidator]"
                  :items="nodeTypeList"
                  clearable
                />
              </VCol>

              <VCol
                v-show="clazzShow"
                cols="12"
              >
                <VTextField
                  v-model="clazz"
                  class="setting-mb-12"
                  label="Java类"
                  clearable
                />
              </VCol>

              <VCol
                v-show="languageShow"
                cols="12"
              >
                <VSelect
                  v-model="language"
                  label="脚本语言"
                  :items="scriptTypeList"
                  clearable
                />
              </VCol>

              <VCol
                v-show="scriptShow"
                cols="12"
              >
                <VTextarea
                  v-model="script"
                  class="setting-mb-12"
                  label="脚本代码"
                  clearable
                  counter
                />
              </VCol>

              <VCol
                v-show="cmpPreShow"
                cols="12"
              >
                <VTextField
                  v-model="cmpPre"
                  class="setting-mb-12"
                  label="前置组件"
                  clearable
                />
              </VCol>

              <VCol
                v-show="cmpFinallyOptShow"
                cols="12"
              >
                <VTextField
                  v-model="cmpFinallyOpt"
                  class="setting-mb-12"
                  label="后置组件"
                  clearable
                />
              </VCol>

              <VCol
                v-show="cmpToShow"
                cols="12"
              >
                <VTextField
                  v-model="cmpTo"
                  class="setting-mb-12"
                  label="to"
                  clearable
                />
              </VCol>

              <VCol
                v-show="cmpDefaultOptShow"
                cols="12"
              >
                <VTextField
                  v-model="cmpDefaultOpt"
                  class="setting-mb-12"
                  label="defaultOpt"
                  clearable
                />
              </VCol>

              <VCol
                v-show="cmpTrueOptShow"
                cols="12"
              >
                <VTextField
                  v-model="cmpTrueOpt"
                  class="setting-mb-12"
                  label="trueOpt"
                  clearable
                />
              </VCol>

              <VCol
                v-show="cmpFalseOptShow"
                cols="12"
              >
                <VTextField
                  v-model="cmpFalseOpt"
                  class="setting-mb-12"
                  label="falseOpt"
                  clearable
                />
              </VCol>

              <VCol
                v-show="cmpParallelShow"
                cols="12"
              >
                <VTextField
                  v-model="cmpParallel"
                  class="setting-mb-12"
                  label="parallel"
                  clearable
                />
              </VCol>

              <VCol
                v-show="cmpDoOptShow"
                cols="12"
              >
                <VTextField
                  v-model="cmpDoOpt"
                  class="setting-mb-12"
                  label="doOpt"
                  clearable
                />
              </VCol>

              <VCol
                v-show="cmpBreakOptShow"
                cols="12"
              >
                <VTextField
                  v-model="cmpBreakOpt"
                  class="setting-mb-12"
                  label="breakOpt"
                  clearable
                />
              </VCol>

              <VCol
                v-show="cmpIdShow"
                cols="12"
              >
                <VTextField
                  v-model="cmpId"
                  class="setting-mb-12"
                  label="id"
                  clearable
                />
              </VCol>

              <VCol
                v-show="cmpTagShow"
                cols="12"
              >
                <VTextField
                  v-model="cmpTag"
                  class="setting-mb-12"
                  label="标签"
                  clearable
                />
              </VCol>

              <VCol
                v-show="cmpMaxWaitSecondsShow"
                cols="12"
              >
                <VTextField
                  v-model="cmpMaxWaitSeconds"
                  class="setting-mb-12"
                  label="超时时间(秒)"
                  clearable
                />
              </VCol>

              <!-- 👉 Submit and Cancel -->
              <VCol cols="12">
                <VBtn
                  type="submit"
                  class="me-3"
                >
                  提交
                </VBtn>
                <VBtn
                  type="reset"
                  variant="tonal"
                  color="secondary"
                  @click="closeNavigationDrawer"
                >
                  取消
                </VBtn>
              </VCol>
            </VRow>
          </VForm>
        </VCardText>
      </VCard>
    </PerfectScrollbar>
  </VNavigationDrawer>
</template>
